
exports.__esModule = true;
exports.default = void 0;

const _utils = require('../../utils');

const _utils2 = require('../utils');

const _utils3 = require('../../datetime-picker/utils');

const _createNamespace = (0, _utils.createNamespace)('calendar-month');
const createComponent = _createNamespace[0];

const _default = createComponent({
  props: {
    date: Date,
    type: String,
    color: String,
    minDate: Date,
    maxDate: Date,
    showMark: Boolean,
    rowHeight: [Number, String],
    formatter: Function,
    currentDate: [Date, Array],
    allowSameDay: Boolean,
    showSubtitle: Boolean,
    showMonthTitle: Boolean,
  },
  data: function data() {
    return {
      visible: false,
    };
  },
  computed: {
    title: function title() {
      return (0, _utils2.formatMonthTitle)(this.date);
    },
    offset: function offset() {
      return this.date.getDay();
    },
    totalDay: function totalDay() {
      return (0, _utils3.getMonthEndDay)(this.date.getFullYear(), this.date.getMonth() + 1);
    },
    monthStyle: function monthStyle() {
      if (!this.visible) {
        const padding = Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight;
        return {
          paddingBottom: `${padding}px`,
        };
      }
    },
    days: function days() {
      const days = [];
      const year = this.date.getFullYear();
      const month = this.date.getMonth();

      for (let day = 1; day <= this.totalDay; day++) {
        const date = new Date(year, month, day);
        const type = this.getDayType(date);
        let config = {
          date,
          type,
          text: day,
          bottomInfo: this.getBottomInfo(type),
        };

        if (this.formatter) {
          config = this.formatter(config);
        }

        days.push(config);
      }

      return days;
    },
  },
  mounted: function mounted() {
    this.height = this.$el.getBoundingClientRect().height;
  },
  methods: {
    scrollIntoView: function scrollIntoView() {
      if (this.showSubtitle) {
        this.$refs.days.scrollIntoView();
      } else {
        this.$refs.month.scrollIntoView();
      }
    },
    getMultipleDayType: function getMultipleDayType(day) {
      const _this = this;

      const isSelected = function isSelected(date) {
        return _this.currentDate.some((item) => (0, _utils2.compareDay)(item, date) === 0);
      };

      if (isSelected(day)) {
        const prevDay = (0, _utils2.getPrevDay)(day);
        const nextDay = (0, _utils2.getNextDay)(day);
        const prevSelected = isSelected(prevDay);
        const nextSelected = isSelected(nextDay);

        if (prevSelected && nextSelected) {
          return 'multiple-middle';
        }

        if (prevSelected) {
          return 'end';
        }

        return nextSelected ? 'start' : 'multiple-selected';
      }

      return '';
    },
    getRangeDayType: function getRangeDayType(day) {
      const _this$currentDate = this.currentDate;
      const startDay = _this$currentDate[0];
      const endDay = _this$currentDate[1];

      if (!startDay) {
        return '';
      }

      const compareToStart = (0, _utils2.compareDay)(day, startDay);

      if (!endDay) {
        return compareToStart === 0 ? 'start' : '';
      }

      const compareToEnd = (0, _utils2.compareDay)(day, endDay);

      if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
        return 'start-end';
      }

      if (compareToStart === 0) {
        return 'start';
      }

      if (compareToEnd === 0) {
        return 'end';
      }

      if (compareToStart > 0 && compareToEnd < 0) {
        return 'middle';
      }
    },
    getDayType: function getDayType(day) {
      const { type } = this;
      const { minDate } = this;
      const { maxDate } = this;
      const { currentDate } = this;

      if ((0, _utils2.compareDay)(day, minDate) < 0 || (0, _utils2.compareDay)(day, maxDate) > 0) {
        return 'disabled';
      }

      if (type === 'single') {
        return (0, _utils2.compareDay)(day, currentDate) === 0 ? 'selected' : '';
      }

      if (type === 'multiple') {
        return this.getMultipleDayType(day);
      }
      /* istanbul ignore else */


      if (type === 'range') {
        return this.getRangeDayType(day);
      }
    },
    getBottomInfo: function getBottomInfo(type) {
      if (this.type === 'range') {
        if (type === 'start' || type === 'end') {
          return (0, _utils2.t)(type);
        }

        if (type === 'start-end') {
          return (0, _utils2.t)('startEnd');
        }
      }
    },
    getDayStyle: function getDayStyle(type, index) {
      const style = {};

      if (index === 0) {
        style.marginLeft = `${100 * this.offset / 7}%`;
      }

      if (this.rowHeight !== _utils2.ROW_HEIGHT) {
        style.height = `${this.rowHeight}px`;
      }

      if (this.color) {
        if (type === 'start' || type === 'end' || type === 'multiple-selected' || type === 'multiple-middle') {
          style.background = this.color;
        } else if (type === 'middle') {
          style.color = this.color;
        }
      }

      return style;
    },
    genTitle: function genTitle() {
      const h = this.$createElement;

      if (this.showMonthTitle) {
        return h('div', {
          class: (0, _utils2.bem)('month-title'),
        }, [this.title]);
      }
    },
    genMark: function genMark() {
      const h = this.$createElement;

      if (this.showMark) {
        return h('div', {
          class: (0, _utils2.bem)('month-mark'),
        }, [this.date.getMonth() + 1]);
      }
    },
    genDays: function genDays() {
      const h = this.$createElement;

      if (this.visible) {
        return h('div', {
          ref: 'days',
          attrs: {
            role: 'grid',
          },
          class: (0, _utils2.bem)('days'),
        }, [this.genMark(), this.days.map(this.genDay)]);
      }

      return h('div', {
        ref: 'days',
      });
    },
    genDay: function genDay(item, index) {
      const _this2 = this;

      const h = this.$createElement;
      const { type } = item;
      const { topInfo } = item;
      const { bottomInfo } = item;
      const style = this.getDayStyle(type, index);
      const disabled = type === 'disabled';

      const onClick = function onClick() {
        if (!disabled) {
          _this2.$emit('click', item);
        }
      };

      const TopInfo = topInfo && h('div', {
        class: (0, _utils2.bem)('top-info'),
      }, [topInfo]);
      const BottomInfo = bottomInfo && h('div', {
        class: (0, _utils2.bem)('bottom-info'),
      }, [bottomInfo]);

      if (type === 'selected') {
        return h('div', {
          attrs: {
            role: 'gridcell',
            tabindex: -1,
          },
          style,
          class: [(0, _utils2.bem)('day'), item.className],
          on: {
            click: onClick,
          },
        }, [h('div', {
          class: (0, _utils2.bem)('selected-day'),
          style: {
            background: this.color,
          },
        }, [TopInfo, item.text, BottomInfo])]);
      }

      return h('div', {
        attrs: {
          role: 'gridcell',
          tabindex: disabled ? null : -1,
        },
        style,
        class: [(0, _utils2.bem)('day', type), item.className],
        on: {
          click: onClick,
        },
      }, [TopInfo, item.text, BottomInfo]);
    },
  },
  render: function render() {
    const h = arguments[0];
    return h('div', {
      class: (0, _utils2.bem)('month'),
      ref: 'month',
      style: this.monthStyle,
    }, [this.genTitle(), this.genDays()]);
  },
});

exports.default = _default;
